<template>
<div id="ptPubDay">
        <!--后退-->
        <img style="position:fixed;height:0.8rem;width:0.5rem;top:1.25rem;left:1.25rem;" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <p style="text-align:center;padding-top:3rem;"><img src="../../assets/tabber/head.png" alt=""></p>
        <div style="width:90%;margin:auto;background:#fff;height:16rem;border:3px solid #69b373;padding:0.75rem;color:#888888;">
            <p>请选择兼职天数</p>
            <p style="text-align:center;font-size:1.7rem;color:red;">{{dayCount.alldayCount}}</p>
            <div class="kaung" >
              <p class="day-day"
                 :class="{slecet:jiba==item.id}"
                 v-for="item in arr" :key="item.index" @click="xuan(item)">{{item.name}}</p>
            </div>
            <p @click="tiaozhuan"  style="width:50%;margin:auto;height:2rem;line-height:2rem;border-radius:13px;text-align:center;font-size:0.9rem;
            color:#FFF;background:#3da499;margin-top:0px;">
              下一步
            </p>
        </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      dayCount:{
          alldayCount:1,
          dayCount:1
      },
      arr:[
        {name:1,id:1},
        {name:2,id:2},
        {name:3,id:3},
        {name:4,id:4},
        {name:5,id:5},
        {name:6,id:6},
        {name:7,id:7},
      ],
      jiba:'1'
    }
  },
  mounted(){
  },
  methods:{
    xuan(val){
      this.dayCount.alldayCount = val.name;
      this.jiba=val.name;
    },
    tiaozhuan(){
       this.$router.push({path:'/partTimePub/'+this.dayCount.alldayCount+'/'+this.dayCount.dayCount})
        //  this.$router.push({
        //     path: '/partTimePub',
        //     name: 'partTimePub', 
        //     query: {
        //         name: 'partTimePub',
        //         data:this.dayCount,
        //     }
        // })
    //   this.$router.push({
    //     path: '/partTimePub',
    //     name: 'partTimePub',
    //     query: {
    //       dayCount:this.alldayCount,
    //     }
    //   })
    },
  }
}
</script>
<style>
#ptPubDay{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/daybg.png);
}
#ptPubDay .kaung{
  display:flex;flex-wrap:wrap;color:#000000;font-size:1rem;
  flex-direction: row;
  width:90%;height:auto;margin-top: -0.5rem;margin-left:1.15rem;justify-content: space-around;
}
#ptPubDay .day-day{
  height:1.75rem;width:2.5rem;text-align:center;line-height:1.75rem;margin: 0.75rem;background: rgb(248, 248, 248);;
}

  #ptPubDay .slecet{
    background: rgb(41, 161, 147);
    color:white;
  }
</style>
